<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>欢迎页面</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="${ctx}/css/font.css">
  <link rel="stylesheet" href="${ctx}/css/xadmin.css">
  <link rel="stylesheet" href="${ctx}/lib/layui/css/layui.css">
  <!-- 导入jquery插件 -->
  <script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="${ctx}/js/jquery-migrate-1.2.1.js"></script>
  <script type="text/javascript" src="${ctx}/js/fkjava_timer.js"></script>
  <script type="text/javascript" src="${ctx}/lib/layui/layui.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.4.0/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

  <style type="text/css">

    p{
      font-family: "宋体","仿宋",sans-serif;
      text-align: left;
      font-size: 14px;
    }
  </style>

  <script type="text/javascript">
    var uve1;
    layui.use(['form','layer'], function(){

      $ = layui.jquery;
      var form = layui.form;
      var layer = layui.layer;
      var time = new Date();

      $(function () {
        $("button").click(function () {
          var studentID = $("#studentID").val();
          //使用ajax加载数据
          $.ajax({
            method:'post',
            url:'${ctx}/echartsData1?id='+studentID+'&timestamp='+time.getTime(),
            dataType:'json',
            success:function(data){
              initChat2(data);
            }
          });
          function initChat2(data){
            var yA = [];
            var yB = [];
            var yC = [];
            var yD = [];
            var yE = [];

            var node = '<ve-line :data="chartData" :settings="chartSettings"></ve-line>';
            var app = document.getElementById('app1');
            app.innerHTML = '';
            app.innerHTML = node;

            //将获取到的json数据列表清洗数据后push到xA,yA两个坐标轴 数据列表中
            //注意，此处循环函数可以用于位置数量的数据，不必提前预知数据量大小
            for(var i=0;i<data.length;i++){
              yA.push(data[i].one);
              yB.push(data[i].two);
              yC.push(data[i].three);
              yD.push(data[i].four);
              yE.push(data[i].five);
            };

            uve1 = new Vue({
              el: '#app1',
              data () {
                this.chartSettings = {
                  title : '评价指标折线统计',
                  metrics: ['极差', '较差', '中等','良好','优秀'],
                  dimension: ['指标'],
                }
                return {
                  chartData: {
                    columns: ['指标', '极差', '较差', '中等','良好','优秀'],
                    rows: [
                      { '指标': '教学内容设计能力', '极差': yA[0], '较差': yB[0], '中等': yC[0],'良好':yD[0],'优秀':yE[0]},
                      { '指标': '组织教学的能力', '极差': yA[1], '较差': yB[1], '中等': yC[1],'良好':yD[1],'优秀':yE[1]},
                      { '指标': '教学方法运用的能力', '极差': yA[2], '较差': yB[2], '中等': yC[2],'良好':yD[2],'优秀':yE[2]},
                      { '指标': '问题解决能力', '极差': yA[3], '较差': yB[3], '中等': yC[3],'良好':yD[3],'优秀':yE[3]},
                      { '指标': '网络技术能力', '极差': yA[4], '较差': yB[4], '中等': yC[4],'良好':yD[4],'优秀':yE[4]}
                    ]
                  }
                }
              }
            });
          };
        });
      });
    });
  </script>


  <script type="text/javascript">
    $(function () {
      $("button").click(function(){
        var studentID = $("#studentID").val();
        var time = new Date();
        //使用ajax加载数据
        $.ajax({
          method:'post',
          url:'${ctx}/echartsData?id='+studentID+'&timestamp='+time.getTime(),
          dataType:'json',
          success:function(data){
            initChat(data);
          }
        });
        function initChat(data){
          var myChart = echarts.init(document.getElementById('mainChart'));
          option = {
            title : {
              text: '参与评价男女同学比例',
              subtext: '内部数据',
              x:'center'
            },
            tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: data
            },
            series : [
              {
                name: '男女数量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:data,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          },
                  myChart.setOption(option);
        };
      });
    });
  </script>
</head>
<body>

<div style="width:100%;height:190%;margin-top:-30px; border:0;" class="main_tabbor">
  <h1 align="center" style="color:  rgb(26,160,147); font-size:30px; margin-top:30px">教师评价结果</h1>
  <div>
    <form class="layui-form" id="select">
      <div class="layui-inline">
        <label class="layui-form-label">查看教师</label>
        <div class="layui-input-inline">
          <select name="modules" lay-verify="required" lay-search="" id="studentID">
            <option value="">请选择所要查看的教师</option>
            <c:forEach items="${requestScope.teacher_list}" var="line" varStatus="stat">
              <option value="${line.userID}">${line.userName}</option>
            </c:forEach>
          </select>
        </div>
      </div>
      <button type="button" value="查询" class="layui-btn">查询</button>
    </form>
  </div>
  <hr>

  <div   style="height:400px;width:320px;margin-top: 120px;margin-left:50px;">
    <div id="mainChart" style="border: 2px solid rosybrown; width:100%; height:100%;"></div>
  </div>

  <div id="app1" style="width: 800px;height: 400px; border:2px solid rosybrown;margin-top:-400px;margin-left:400px;">
  </div>

  <script>
    layui.use(['form','layer'], function(){
      $ = layui.jquery;
      var form = layui.form
              ,layer = layui.layer;
      //自定义验证规则
      form.verify({
        nikename: function(value){
          if(value.length < 5){
            return '昵称至少得5个字符啊';
          }
        }
        ,pass: [/(.+){6,12}$/, '密码必须6到12位']
        ,repass: function(value){
          if($('#L_pass').val()!=$('#L_repass').val()){
            return '两次密码不一致';
          }
        }
      });
    });
  </script>
</div>
</body>

</html>